var req;
var isIE;
var completeFieldStart;
var completeTableStart;
var completeFieldDestination;
var completeTableDestination;
var timeField;
var autoRowStart, autoRowDestination;

var reqSubmit;
var resultTable;


function init() {
    completeFieldStart = document.getElementById("complete-field-start");
    completeTableStart = document.getElementById("complete-table-start");
    autoRowStart = document.getElementById("auto-row-start");
    completeTableStart.style.top = getElementY(autoRowStart) + "px";
   
    
    completeFieldDestination = document.getElementById("complete-field-destination");
    completeTableDestination = document.getElementById("complete-table-destination");
    autoRowDestination = document.getElementById("auto-row-destination");
    completeTableDestination.style.top = getElementY(autoRowDestination) + "px";
   
    timeField = document.getElementById("date-field");
   
    resultTable = document.getElementById("resultTable");
   
}

function doCompletion(inputFieldId) {

    action="complete";
    
    if(inputFieldId === "complete-field-start"){                            
        var url = "autocomplete?action=complete&input=" + escape(completeFieldStart.value);
        req = initRequest();
        req.open("GET", url, true);
        
        req.onreadystatechange = callback(completeTableStart, "complete");
        req.send(null);      
    } else if(inputFieldId === "complete-field-destination"){
        var url = "autocomplete?action=complete&input=" + escape(completeFieldDestination.value);
        req = initRequest();
        req.open("GET", url, true);
        req.onreadystatechange = callback(completeTableDestination, "complete");
        req.send(null);        
    }
    
}

function initRequest() {
    if (window.XMLHttpRequest) {
        if (navigator.userAgent.indexOf('MSIE') != -1) {
            isIE = true;
        }
        return new XMLHttpRequest(); 
    } else if (window.ActiveXObject) {
        isIE = true;
        return new ActiveXObject("Microsoft.XMLHTTP");
    }
    
}

function callback(tableElement, action) { 
    if(action === "complete"){
        
        return function() {
            if(tableElement === completeTableStart){
                clearTable(tableElement);
                if (req.readyState === 4) {
                    if (req.status === 200) 
                    parseMessages(tableElement, req.responseXML);
                }
            }
        
            if(tableElement === completeTableDestination){
                clearTable(tableElement);
                if (req.readyState === 4) {
                    if (req.status === 200) 
                    parseMessages(tableElement, req.responseXML);
                }
            
            }
        }
    }
    if(action === "submit"){
        resultDiv = document.getElementById("result");
        resultDiv.innerHTML = "<p> oh </p>";
            
    
    }
}

function callcallback(){
    callback(table, "submit");
}


function appendBusStation(tableElement, name) {

    var row;
    var cell;
    
   
    
    if (isIE) {
        tableElement.style.display = 'block';
        row = tableElement.insertRow(tableElement.rows.length);
        cell = row.insertCell(0);
    } else {
        tableElement.style.display = 'table';
        
        row = document.createElement("tr");
        cell = document.createElement("td");
        cell.className = "popupCell";
        cell.innerHTML = name;
        if(tableElement === completeTableStart){
            cell.addEventListener("click", function(){document.getElementById("complete-field-start").value = name; 
                                                        clearTable(tableElement);
                                                        }); 
            
        } else if(tableElement === completeTableDestination){
            cell.onclick = function(){document.getElementById("complete-field-destination").value = name; 
                                        clearTable(tableElement);
                                        };
        }
        row.appendChild(cell);
        tableElement.appendChild(row);
    }

    

}


function clearTable(tableElement) {
    if (tableElement.getElementsByTagName("tr").length > 0) {
        tableElement.style.display = 'none';
        for (loop = tableElement.childNodes.length -1; loop >= 0 ; loop--) {
            tableElement.removeChild(tableElement.childNodes[loop]);
        }
    }
}

function getElementY(element){
    
    var targetTop = 0;
    
    
    if (element.offsetParent) {
        
        while (element.offsetParent) {
            targetTop += element.offsetTop;
            element = element.offsetParent;
            
        }
    } else if (element.y) {
        
        targetTop += element.y;
    }
    return targetTop;
}

function parseMessages(tableElement, responseXML) {
    
    // no matches returned
    if (responseXML === null) {
        return false;
    } else {

        var busStations = responseXML.getElementsByTagName("busStations")[0];

        if (busStations.childNodes.length > 0) {
            tableElement.setAttribute("bordercolor", "black");
            tableElement.setAttribute("border", "1");
            
            for (loop = 0; loop < busStations.childNodes.length; loop++) {
                var busStation = busStations.childNodes[loop];
                var name = busStation.getElementsByTagName("name")[0];
                appendBusStation(tableElement, name.childNodes[0].nodeValue);
            }
        }
    }
}

function getHiddenValue(){
    document.getElementById("hidden_startStation").value = document.getElementById("complete-field-start").value;
    document.getElementById("hidden_destinationStation").value = document.getElementById("complete-field-destination").value;
    document.getElementById("hidden_desireTime").value = document.getElementById("date-field").value;
}


 